<template>
	<view>

		<uni-badge class="uni-badge-left-margin graphics" :text="8" absolute="rightTop" size="small">

		</uni-badge>

		<uni-nav-bar height='60px' backgroundColor="#272a3b" color="#6caa07" right-icon="notification" info='2' dark
			title="早上好! 张三先生">

		</uni-nav-bar>
		<uni-swiper-dot color='red' :dots-styles="dotsStyles" class="du_aa" :info="info" :current="current"
			field="content" :mode="mode">
			<swiper class="swiper-box" lass="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">

						<image style="width:100%;height:auto" :src="item.content" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="backLoar">
			<uni-grid :showBorder="false" :column="middleware.length" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in middleware" :index="index" :key="index">
					<view class="grid-item-box">
						<uni-icons :type="item.image" :size="30" color="#777" />
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<uni-grid style="margin-top: 0.2rem; width: 100%; " :column="4" :highlight="true" @change="changes">
			<uni-grid-item v-for="(item, index) in hierarchy" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons :type="item.image" :size="30" color="#777" />
					<text class="text">{{item.text}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<view class="">
			<uni-popup ref="popup" background-color="#fff">
				<view class="upper_arts">
					<text style="font-size: 1.5rem; color: #82b603;">功能B</text>
				</view>
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<uni-grid :showBorder="false" :column="5">
						<uni-grid-item v-for="(item, index) in setLock" :index="index" :key="index">
							<view class="grid-item-boxs" style="background-color: #fff;">
								<uni-icons :type="item.image" :size="30" color="#777" />
								<text class="text">{{item.text}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</uni-popup>
		</view>

		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="preview">
			<view style="background-color: #efedee;">

				<helang-tab-bar-bulge :fixed-bottom="false"></helang-tab-bar-bulge>
			</view>
		</view>

	</view>

</template>

<script>
	import tabBarBulge from "@/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge";
	export default {
		data() {
			return {
				title: '',
				type: 'center',

				setLock: [{
						image: 'calendar-filled',
						text: "功能1"
					}, {
						image: 'calendar-filled',
						text: "功能2"
					},
					{
						image: 'calendar-filled',
						text: "功能3"
					},
					{
						image: 'calendar-filled',
						text: "功能4"
					},
					{
						image: 'calendar-filled',
						text: "功能5"
					},
					{
						image: 'calendar-filled',
						text: "功能6"
					},
					{
						image: 'calendar-filled',
						text: "功能7"
					},
					{
						image: 'calendar-filled',
						text: "功能8"
					},
					{
						image: 'calendar-filled',
						text: "功能9"
					},
					{
						image: 'calendar-filled',
						text: "功能10"
					},
				],
				middleware: [{
					image: 'calendar-filled',
					text: "功能1"
				}, {
					image: 'email-filled',
					text: "功能2"
				}, {
					image: 'sound-filled',
					text: "功能3"
				}, {
					image: 'paperplane-filled',
					text: "功能4"
				}, {
					image: 'wallet',
					text: "功能5"
				}],
				info: [{
					content: require('@/static/1.jpg')
				}, {
					content: require('@/static/1.jpg')
				}, {
					content: require('@/static/1.jpg')
				}],
				current: 0,
				dotsStyles: {},

				mode: 'default',
				hierarchy: [{
						image: 'calendar-filled',
						text: "功能A"
					}, {
						image: 'calendar-filled',
						text: "功能B"
					}, {
						image: 'calendar-filled',
						text: "功能C"
					}, {
						image: 'calendar-filled',
						text: "功能D"
					}, {
						image: 'calendar-filled',
						text: "功能E"
					},
					{
						image: 'calendar-filled',
						text: "功能F"
					},
					{
						image: 'calendar-filled',
						text: "功能G"
					},
					{
						image: 'calendar-filled',
						text: "功能H"
					},
					{
						image: 'calendar-filled',
						text: "功能I"
					},
					{
						image: 'calendar-filled',
						text: "功能J"
					},
				],




			}
		},
		components: {

			"helang-tab-bar-bulge": tabBarBulge,

		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			toggle(type) {
				this.type = type

				this.$refs.popup.open(type)
			},
			changes(e) {

				if (e.detail.index == 1) {
					this.$refs.popup.open('center')
					console.log('1');

				}

			},

		}
	}
</script>

<style>
	.uni-badge--x {
		display: block;
		position: relative;
		left: -0.8rem;
		top: 1.2rem;
		/* right: 0rem; */
	}

	.text-area {
		width: 100%;
		height: 20rem;
		background-color: #fff;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.preview {
		width: 100%;
		position: fixed;
		bottom: 0;
z-index: 1100;

	}

	.upper_arts {
		width: 100%;
		height: 5rem;
		background-color: #272a3b;
		text-align: center;
		line-height: 5rem;

	}

	.popup-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 23rem;
		height: 17rem;
		background-color: #fff;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-boxs {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.du_aa {
		margin-top: -0.2rem;
	}

	.backLoar {
		width: 100%;
		height: 6.1rem;
		background-color: #272a3b;
	}

	.swiper-box {
		height: 200px;
	}

	.text {
		color: #7b7e81;
	}
</style>
